view {
    box-sizing: border-box;
}
.container{
    padding-top: 32rpx;
}
.swiper {
    width: 686rpx;
    height: 343rpx;
    border-radius: 16rpx;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    &Item {
        width: 100%;
        height: 100%;
        &__image {
            width: 686rpx;
            height: 343rpx;
            border-radius: 16rpx;
        }
    }
    &Dots{
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 10rpx;
        .dotsItem{
            width: 10rpx;
            height: 8rpx;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4rpx;
            margin: 0 4rpx;
            transition: all 0.3s;
            &-active{
                width: 24rpx;
                background: rgba(255, 255, 255, 1);
            }
        }
    }
}
.nav {
    width: 100vw;
    padding: 0 27rpx;
    margin: 58rpx 0 60rpx;
    &Item{
        flex-direction: column;
        text-align: center;
        &__image{
            width: 112rpx;
            height: 112rpx;
            margin-bottom: 10rpx;
        }
        &__text{
            color: #333333;
            font-size: 24rpx;
            font-weight: bold;
        }
    }
}
.title {
    width: 100vw;
    padding: 0 32rpx;
    &__text{
        font-size: 32rpx;
        color: #000000;
        font-weight: bold;
        letter-spacing: 2rpx;
    }
}